<template>
	<gui-page :customHeader="true">
		<view slot="gHeader">
			<view class="gui-flex">
				<view class="search-warp gui-border-box"  style="width: 660rpx;padding: 0 20rpx;">
					<gui-search :kwd="key" @clear="clear" background="#f7f7f7" @confirm="confirm" :clearBtn="true"></gui-search>
				</view>
				<gui-mp-menu-spacing></gui-mp-menu-spacing>
			</view>
			
		</view>
		<view class="fixed-top-view gui-bg-white gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center" slot="gFixedTop" id="fixed-top-view">
			<view class="graceSelectMenuItem">
				<gui-select-menu  :activeColor='activeColor' :titleColor="orderIndex == 0 ? activeColor : defColor" ref="selectMenu1" :items="selectMenu1" @select="select1"></gui-select-menu>
			</view>
			<view class="graceSelectMenuItem" @tap="orderBySellNumber">
				<text class="gui-block-text gui-text gui-text-center" :style="{ color: orderIndex == 1 ? activeColor : defColor }">销量</text>
			</view>
			<view class="graceSelectMenuItem">
				<gui-order @change="priceOrder" :orderBy="orderByIndex" :limit="[1, 2]">
					<text class="gui-text gui-block-text" :style="{ color: orderIndex == 2 ? activeColor : defColor }">价格</text>
				</gui-order>
			</view>
			<view class="graceSelectMenuItem" @tap="showScreening"><text class="gui-text gui-block-text gui-text-center gui-icons">筛选 &#xe686;</text></view>
		</view>
		<view slot="gBody" style="margin-top:100rpx;background-color: #F5F6F8;padding-top: 25rpx;">
			<gui-empty1 v-if="products.length<=0" style='background-color: #Ffffff;' num='1200'>
					<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="gui-empty-img" style="margin-top: 0;"
						src="https://upload-images.jianshu.io/upload_images/15372054-1f849183cebb80b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/388/format/webp"></image>
					</view>
					<text slot="text" 
					class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">暂无数据 ......</text>
			</gui-empty1>
			
			<gui-product-list2 v-else :products="products" lujing='/pages/index/shop_detail'></gui-product-list2>
			<gui-popup ref="guipopupright" position="right" width="580rpx" :top="rightAraeTop">
				<view class="gui-bg-white right-area gui-box-shadow">
					<scroll-view :scroll-y="true" :style="{ height: rightAraeHeight + 'px' }">
						<view style="padding-left:25rpx; padding-right:25rpx;">
							<view class="gui-margin-top"><text class="gui-text gui-color-gray">关键字筛选</text></view>
							<view style="margin-top:15rpx;"><gui-stags :tags="sizes" checkedBg='gui-gtbg-red' :padding="30" :lineHeight="2.5" @change="sedSize" type="checkbox"></gui-stags></view>
							<view class="gui-margin-top"><text class="gui-text gui-color-gray">价格区间</text></view>
							<view style="margin-top:15rpx;" class="gui-flex gui-rows gui-nowrap gui-align-items-center">
								<input type="text" class="price-input gui-border-box" v-model="price1" />
								<text class="gui-block-text gui-color-gray" style="margin:20rpx;">-</text>
								<input type="text" class="price-input gui-border-box" v-model="price2" />
							</view>
							
						</view>
					</scroll-view>
					<view class="right-area-footer gui-flex gui-rows gui-nowrap">
						<view class="right-area-footer-btn" hover-class="gui-tap" @tap="screeningReset">
							<text class="right-area-footer-btn gui-block-text gui-color-gray">重置</text>
						</view>
						<view class="right-area-footer-btn gui-bg-red" hover-class="gui-tap" @tap="screeningSubmit">
							<text class="right-area-footer-btn gui-block-text gui-color-white">提交</text>
						</view>
					</view>
				</view>
			</gui-popup>
		</view>
	</gui-page>
</template>
<script>
let common = require('@/common.js');
var graceJS = require('@/lizhili/js/grace.js');
export default {
	data() {
		return {
			products: [],
			selectMenu1: [],
			fenlei:'',
			defColor: '#2B2E3D',
			activeColor: '#FF0036',
			orderIndex: 0,
			orderByIndex: 0,
			sizes: [
				{ id: 0, text: '商城商品', checked: true },
				{ id: 1, text: '社区团购', checked: true },
			],
			sizeSed: '0,1',
			price1: 0,
			price2: 0,
			rightAraeHeight: 150,
			rightAraeTop: 0,
			key:'',
			page:1
		};
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
		const user_no = uni.getStorageSync('user_no');
	    return {
	      title: '商城欢迎您！',
	      path: '/pages/index/xiaofei?yaoqing=' + user_no
	    }
	  },
	onLoad: function(e) {
		if (e.yaoqing) {
			uni.setStorageSync('yaoqing', e.yaoqing);
		}
		if(e.type){
			this.fenlei=e.type
		}
		if(e.key){
			this.key=e.key
		}
		console.log(1111,e);
		var systemInfo = graceJS.system();
		this.rightAraeHeight = systemInfo.windowHeight - uni.upx2px(500);
		this.get_data();
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_xiaofei_cate',
			},
			false,
			res => {
				if (res.code == 1) {
					let ar=['分类']
					for (let s of res.data) {
						ar.push(s.name)
					}
					ar.push('其他')
					this.selectMenu1=ar
					for (let i in ar) {
						if(ar[i]==this.fenlei){
							this.$refs.selectMenu1.setCurrentIndex(i);
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '已经加载全部'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
	},
	onReady: function() {
		graceJS.select('#fixed-top-view', res => {
			this.rightAraeTop = res.height + 64;
		});
	},
	onReachBottom(){
		this.get_data()
	},
	methods: {
		clear(e){
			this.page=1
			this.key=''
			this.get_data()
		},
		confirm(e){
			this.page=1
			this.key=e
			this.get_data()
		},
		get_data(){
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_xiaofei_list',
					key:this.key,
					sizeSed:this.sizeSed,
					fenlei:this.fenlei,
					orderIndex: this.orderIndex,
					orderByIndex: this.orderByIndex,
					price1: this.price1,
					price2: this.price2,
					page:this.page
				},
				false,
				res => {
					if (res.code == 1) {
						let list=[]
						for (let v of res.data) {
							list.push({
								'id':v.id,
								'name':v.goods_name,
								'img':common.obs+v.goods_img,
								'priceMarket':v.sales_num,
								'price':v.money,
								'lei':v.lei
							})
						}
						if(this.page==1){
							this.products=list
						}else{
							this.products = this.products.concat(list);
						}
						this.page++
					} else {
						if(this.page==1){
							this.products=[]
						}
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		showMenu1: function() {
			this.show1 = true;
		},
		closeMenu1: function() {
			this.show1 = false;
		},
		select1: function(index, val) {
			this.fenlei=val
			this.orderIndex = 0;
			this.orderByIndex = 0;
			this.page=1
			this.get_data()
		},
		orderBySellNumber: function() {
			this.orderIndex = 1;
			this.orderByIndex = 0;
			this.page=1
			this.get_data()
		},
		priceOrder: function(e) {
			if (e != 0) {
				this.orderIndex = 2;
			}
			this.orderByIndex = e;
			this.page=1
			this.get_data()
		},
		// 展示筛选界面
		showScreening: function() {
			this.$refs.guipopupright.open();
		},
		// 选择尺寸
		sedSize: function(e) {
			this.sizeSed = e;
		},
		// 筛选提交
		screeningSubmit: function() {
			this.$refs.guipopupright.close();
			this.page=1
			this.get_data()
		},
		// 重置筛选
		screeningReset: function() {
			this.sizes = [
				{ id: 0, text: '好评', checked: false },
				{ id: 1, text: '推荐', checked: false },
				{ id: 2, text: '热门', checked: false },
			];
			this.price1 = 0;
			this.price2 = 0;
			this.sizeSed = 0;
			this.page=1
			this.get_data()
		}
	}
};
</script>
<style>
/* 自定义吸顶元素样式 */
.fixed-top-view {
	height: 100rpx;
}
.graceSelectMenuItem {
	width: 180rpx;
}
.right-area {
	flex: 1;
	height: 800rpx;
}
.colorTags {
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 26rpx;
	color: #ffffff;
	border-radius: 5rpx;
}
.price-input {
	width: 120rpx;
	line-height: 50rpx;
	height: 80rpx;
	font-size: 26rpx;
	text-align: center;
	background-color: #f5f6f8;
	border-radius: 5rpx;
}
.right-area-footer {
	width: 580rpx;
	height: 100rpx;
	background-color: #f7f8fa;
}
.right-area-footer-btn {
	width: 290rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	text-align: center;
}
.gui-product{width:330rpx; overflow: hidden;background-color: #ffffff;}
.gui-product-lines{margin-top:10rpx;padding: 0 10rpx;}
.gui-product-name{font-size:28rpx; line-height:32rpx;}
</style>
